<template>
  <view class="player-container">
    <!-- 视频播放器 -->
    <video 
      class="memory-video"
      :src="videoUrl"
      autoplay
      controls
      show-center-play-btn
      show-play-btn
      title="我的回忆"
      @error="handleError"
    ></video>
    
    <!-- 视频信息 -->
    <view class="video-info">
      <view class="info-header">
        <text class="video-title">{{title}}</text>
        <text class="create-time">{{createTime}}</text>
      </view>
      
      <!-- 操作按钮 -->
      <view class="action-buttons">
        <view class="action-btn" @click="handleShare">
          <u-icon name="share" size="44" color="#666"></u-icon>
          <text>分享</text>
        </view>
        <view class="action-btn" @click="handleDownload">
          <u-icon name="download" size="44" color="#666"></u-icon>
          <text>下载</text>
        </view>
        <view class="action-btn" @click="handleEdit">
          <u-icon name="edit-pen" size="44" color="#666"></u-icon>
          <text>编辑</text>
        </view>
      </view>
    </view>
    
    <!-- 推荐的其他回忆 -->
    <view class="recommend-section">
      <view class="section-title">更多回忆</view>
      <scroll-view class="recommend-scroll" scroll-x>
        <view class="recommend-list">
          <view 
            class="recommend-item" 
            v-for="item in recommendList" 
            :key="item.id"
            @click="playVideo(item)"
          >
            <image :src="item.cover" mode="aspectFill"></image>
            <view class="item-info">
              <text class="item-title">{{item.title}}</text>
              <text class="item-date">{{item.date}}</text>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      videoUrl: '/static/demo.mp4', // 这里需要替换为实际的视频地址
      title: '春日的回忆',
      createTime: '2024-03-15',
      recommendList: [
        {
          id: 1,
          title: '冬日温情',
          date: '2024-02',
          cover: '/static/src.png'
        },
        {
          id: 2,
          title: '秋日物语',
          date: '2023-11',
          cover: '/static/src.png'
        },
        {
          id: 3,
          title: '夏日记忆',
          date: '2023-08',
          cover: '/static/src.png'
        }
      ]
    }
  },
  methods: {
    handleError(e) {
      console.error('视频播放错误', e);
      uni.showToast({
        title: '视频加载失败',
        icon: 'none'
      });
    },
    handleShare() {
      uni.showShareMenu({
        withShareTicket: true,
        menus: ['shareAppMessage', 'shareTimeline']
      });
    },
    handleDownload() {
      uni.showLoading({
        title: '正在下载...'
      });
      
      // 模拟下载过程
      setTimeout(() => {
        uni.hideLoading();
        uni.showToast({
          title: '下载成功',
          icon: 'success'
        });
      }, 2000);
    },
    handleEdit() {
      uni.navigateTo({
        url: '/pages/memory/create'
      });
    },
    playVideo(item) {
      // 切换到其他视频
      this.videoUrl = item.videoUrl;
      this.title = item.title;
      this.createTime = item.date;
    }
  }
}
</script>

<style>
.player-container {
  min-height: 100vh;
  background-color: #f8f8f8;
}

.memory-video {
  width: 100%;
  height: 422rpx;
}

.video-info {
  background-color: #fff;
  padding: 30rpx;
  margin-bottom: 20rpx;
}

.info-header {
  margin-bottom: 30rpx;
}

.video-title {
  font-size: 32rpx;
  color: #333;
  font-weight: 500;
  display: block;
  margin-bottom: 10rpx;
}

.create-time {
  font-size: 24rpx;
  color: #999;
}

.action-buttons {
  display: flex;
  justify-content: space-around;
  padding: 20rpx 0;
  border-top: 1px solid #f5f5f5;
}

.action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.action-btn text {
  font-size: 24rpx;
  color: #666;
  margin-top: 10rpx;
}

.recommend-section {
  background-color: #fff;
  padding: 30rpx;
}

.section-title {
  font-size: 30rpx;
  color: #333;
  font-weight: 500;
  margin-bottom: 20rpx;
}

.recommend-scroll {
  width: 100%;
}

.recommend-list {
  display: flex;
  padding: 10rpx 0;
}

.recommend-item {
  margin-right: 20rpx;
  width: 300rpx;
  border-radius: 12rpx;
  overflow: hidden;
  background-color: #fff;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.recommend-item image {
  width: 100%;
  height: 200rpx;
}

.item-info {
  padding: 15rpx;
}

.item-title {
  font-size: 26rpx;
  color: #333;
  display: block;
  margin-bottom: 8rpx;
}

.item-date {
  font-size: 22rpx;
  color: #999;
}
</style> 